<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户提现</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">账户提现</h1>
                <i class="fas fa-question-circle text-lg"></i>
            </div>
        </div>

        <!-- Account Info -->
        <div class="px-4 py-3 bg-gradient-to-r from-pink-500 to-rose-500">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="text-white text-center">
                    <p class="text-sm opacity-80 mb-1">可提现余额</p>
                    <p class="text-3xl font-bold mb-2">¥155,946.80</p>
                    <p class="text-xs opacity-70">今日可提现次数: 2次</p>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Withdraw Form -->
            <div class="p-4">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                    <!-- Amount Input -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">提现金额</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 font-medium">¥</span>
                            <input type="number" id="withdrawAmount" placeholder="0.00" 
                                   class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent text-lg font-medium">
                        </div>
                        <div class="flex justify-between mt-2">
                            <div class="flex space-x-2">
                                <button onclick="setAmount(1000)" class="bg-pink-50 text-pink-600 text-xs px-3 py-1 rounded-full">¥1000</button>
                                <button onclick="setAmount(5000)" class="bg-pink-50 text-pink-600 text-xs px-3 py-1 rounded-full">¥5000</button>
                                <button onclick="setAmount(10000)" class="bg-pink-50 text-pink-600 text-xs px-3 py-1 rounded-full">¥10000</button>
                            </div>
                            <button onclick="setAmount(155946.80)" class="text-pink-600 text-xs font-medium">全部提现</button>
                        </div>
                    </div>

                    <!-- Bank Account -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">提现到</label>
                        <div class="border border-gray-300 rounded-lg p-3 cursor-pointer hover:bg-gray-50" onclick="selectBank()">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-university text-blue-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">工商银行</p>
                                        <p class="text-xs text-gray-500">尾号8866</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Fee Info -->
                    <div class="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-yellow-600 mt-1 mr-2"></i>
                            <div class="text-xs">
                                <p class="text-yellow-800 font-medium mb-1">提现说明</p>
                                <p class="text-yellow-700">• 单笔提现限额: ¥50,000</p>
                                <p class="text-yellow-700">• 每日提现限额: ¥100,000</p>
                                <p class="text-yellow-700">• 提现手续费: 2元/笔</p>
                                <p class="text-yellow-700">• 到账时间: T+1工作日</p>
                            </div>
                        </div>
                    </div>

                    <!-- Withdraw Button -->
                    <button onclick="confirmWithdraw()" class="w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-semibold py-3 rounded-lg shadow-sm hover:shadow-md transition-all">
                        确认提现
                    </button>
                </div>
            </div>

            <!-- Recent Withdrawals -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-pink-600 mr-2 rounded-full"></span>
                    最近提现记录
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">提现申请</p>
                                <p class="text-xs text-gray-500">工商银行尾号8866</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold">¥10,000</p>
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已到账</span>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400">2025-01-04 15:30</p>
                    </div>
                    
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">提现申请</p>
                                <p class="text-xs text-gray-500">工商银行尾号8866</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold">¥5,000</p>
                                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">处理中</span>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400">2025-01-05 10:15</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        function setAmount(amount) {
            document.getElementById('withdrawAmount').value = amount;
        }

        function selectBank() {
            alert('选择银行账户功能');
        }

        function confirmWithdraw() {
            const amount = document.getElementById('withdrawAmount').value;
            if (!amount || amount <= 0) {
                alert('请输入提现金额');
                return;
            }
            if (amount > 155946.80) {
                alert('提现金额不能超过可用余额');
                return;
            }
            if (amount > 50000) {
                alert('单笔提现限额为50,000元');
                return;
            }
            
            // 模拟提现确认
            if (confirm(`确认提现 ¥${amount} 元到工商银行尾号8866账户？\n手续费: ¥2\n实际到账: ¥${(amount - 2).toFixed(2)}`)) {
                alert('提现申请已提交，预计T+1工作日到账');
                window.history.back();
            }
        }
    </script>
</body>
</html>